<template>
  <div>
    <div class="page_tab_top">
      <div
        class="tab_list_item"
        @click="cutTab(1)"
        :class="currentIndex === 1 ? 'tab_active' : ''"
      >
        商品列表
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(2)"
        :class="currentIndex === 2 ? 'tab_active' : ''"
      >
        商品分类
      </div>
    </div>
    <commodityManager
      ref="commodityManager"
      v-show="this.currentIndex === 1"
    ></commodityManager>
    <Goodsort ref="Goodsort" v-show="this.currentIndex === 2"></Goodsort>
  </div>
</template>

<script>
import commodityManager from "./commodityManager.vue";
import Goodsort from "./Goodsort.vue";
export default {
  components: { commodityManager, Goodsort },
  name: "EryuoaStoreFrontendIndex",

  data() {
    return {
      currentIndex: 1,
    };
  },

  mounted() {},

  methods: {
    //  // 顶部tab切换
    cutTab(i) {
      this.currentIndex = i;
      this.changeTab();
    },

    changeTab() {
      if (this.currentIndex === 1) {
        this.$refs.commodityManager.resQ();
      } else if (this.currentIndex === 2) {
        this.$refs.Goodsort.resQ();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>